<template>
  <div class="app-container">
    <el-form ref="item" label-width="160px">
      <el-row>
        <div class="top-box">
          <div class="box">
            <el-form-item label="订单状态:">
              {{ form.service_status | orderStatus }}
            </el-form-item>
            <el-form-item label="拼团服务ID:">
              {{ form._id }}
            </el-form-item>
            <el-form-item label="服务标题:">
              {{ form.service_name }}
            </el-form-item>
            <el-form-item label="服务一级分类:">
              {{ form.service_branch_id ? form.service_branch_id.classify_name : '--' }}
            </el-form-item>
            <el-form-item label="服务二级分类:">
              {{ form.service_classify_id.classify_name }}
            </el-form-item>
            <el-form-item label="拼团开始时间:">
              {{ form.ping_begin_time | fomateTime }}
            </el-form-item>
            <el-form-item label="拼团结束时间:">
              {{ form.ping_end_time | fomateTime }}
            </el-form-item>
            <el-form-item label="发布时间:">
              {{ form.update_time | fomateTime }}
            </el-form-item>
            <el-form-item label="服务开始日期:">
              {{ form.service_begin_time | fomateTime }}
            </el-form-item>
            <el-form-item label="服务结束日期:">
            {{ form.service_end_time | fomateTime }}
            </el-form-item>
            <el-form-item label="服务时间段:">
              {{ form.service_time_begin_slot }} - {{form.service_time_end_slot}}
            </el-form-item>
            <el-form-item label="服务区域:">
              {{ form.service_area_name }}
            </el-form-item>
          </div>
          <div class="box">
            <el-form-item label="拼团价格:">
              {{ form.service_original_money }}
            </el-form-item>
            <el-form-item label="划线价格:">
              {{ form.service_money }}
            </el-form-item>
            <el-form-item label="服务中心位置:">
              {{ form.service_address_name }}
            </el-form-item>
            <el-form-item label="服务范围半径:">
              {{ form.service_address_radius }}
            </el-form-item>
            <el-form-item label="服务轮播图:">
              <div class="showImg" v-for="n in form.service_banner_img">
                 <img :src="n" @click="clickImg($event)">
                 <!-- 放大图片 -->
                 <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
             </div>
            </el-form-item>
            <el-form-item label="服务详情图:">
              <div class="showImg">
                 <img :src="form.service_content" @click="clickImg($event)">
                 <!-- 放大图片 -->
                 <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
             </div>
            </el-form-item>
          </div>
        </div>
      </el-row>
    </el-form>
    <div class="title">服务信息</div>
    <el-table :data="tableData" id="out-table" style="width: 100%" max-height="800">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" width="50" align="center"></el-table-column>
      <el-table-column
        v-for="item in tableList"
        :key="item._id"
        :prop="item.value"
        :label="item.name"
        :width="item.width"
        align="center">
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals">
      </el-pagination>
      <el-button class="upload" @click="exportExcel">导出excal
      </el-button>
    </div>
    <el-button type="danger" v-if="form.service_status == 3">下架</el-button>
    <el-button type="info" @click="back">返回</el-button>
  </div>
</template>

<script>
import { Excel,payType,validateCollage } from '@/utils/validate'
import { formatDate } from '@/utils/index'
import request from '@/utils/request'
import BigImg from '@/views/collage/showImg.vue';
export function getList(mes) {
  return request({
    url: '/v1/admin/order',
    method: 'post',
    data: mes
  })
}
export default {
  data(){
    return{
      service:[],
      form: [],
      tableData: [],
      tableList: [
        { name: '用户昵称', value: 'name' },
        { name: '联系方式', value: 'tel' },
        { name: '订单编号', value: 'id' },
        { name: '订单金额', value: 'money' },
        { name: '下单时间', value: 'downTime' },
        { name: '支付方式', value: 'type' },
        { name: '支付时间', value: 'payTime' },
        { name: '服务人员', value: 'person' },
        { name: '服务商家', value: 'business' },
      ],
      currentPage: 1,
      totals: 0,
      size: 10,
      showImg:false,
      imgSrc: ''
    }
  },
  components: {
    'big-img':BigImg
  },
  created: function () {
    this.form = JSON.parse(localStorage.getItem('CollageMes'))
    console.log(this.form);
    let item = {
    }
    this.service.push(item)
    console.log(this.service);
    let n = {
      page: 1,
      size: 10,
      service_id: this.form._id
    }
    this.getMes(n)
  },
  methods: {
    clickImg(e) {
        this.showImg = true;
        // 获取当前图片地址
        this.imgSrc = e.currentTarget.src;
    },
    viewImg(){
        this.showImg = false;
    },
    getMes(item) {
      getList(item).then(res => {
        console.log(res);
        if (res.code === 200) {
          if (res.data.list.length) {
            this.setTableData = res.data.list
            this.totals = res.data.totalNumber
            res.data.list.map(item => {
              const val = {
                name: item.user_id.nickname,
                tel: item.user_id.user_phone,
                id: item._id,
                money: item.order_money,
                downTime: item.service_id ? formatDate(new Date(item.service_id.update_time*1000), 'yyyy-MM-dd hh:mm') : '无',
                type: payType(item.order_pay_type),
                // payTime: item.
                // person: item.
                business: item.service_business_name || '空'
              }
              this.tableData.push(val)
            })
          }
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      }).catch(error => {
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    exportExcel() {
      Excel('#out-table')
    },
    handleSizeChange(val) {
      this.tableData = []
      let obj = {
        size: val,
        page: 1
      }
      this.getMes(obj)
      this.size = val
    },
    handleCurrentChange(page) {
      this.tableData = []
      let obj = {
        page: page,
        size: this.size
      }
      this.getMes(obj)
    },
    back() {
      this.$router.go(-1)
    }
  },
  filters: {
    orderStatus(item) {
      return validateCollage(item)
    },
    fomateTime(time) {
      return time ? formatDate(new Date(time*1000), 'yyyy-MM-dd  hh:mm') : '无'
    }
  }
}
</script>

<style scoped>
  .el-steps{
    margin: 20px 0;
  }
  .title {
    line-height: 30px;
    font-weight: bold;
    border-left: 5px solid #a2c33d;
    padding-left: 10px;
    margin: 5px;
  }
  .top-box{
    background: #eaf4fd;
    padding: 10px;
    border: 1px solid #d4e4f3;
    display: flex;
    flex-wrap: wrap;
  }
  .box{
    width: 45%;
  }
  .state{
    width: 10%;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    display: inline-block;
  }
  .footer{
    line-height: 30px;
    font-weight: 600;
    margin-top: 20px;
    border-bottom: 1px solid #d4d4d4;
  }
  .footer div{
    display: inline-block;
    width: 120px;
    text-align: center;
  }
  .footer div:hover{
    background: #d4e4f3;
  }
  .two{
    display: none;
  }
  .footer .active{
    background: #d4e4f3;
  }
  .block{
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  .showImg{
    display: inline-block;
    margin: 5px;
  }
  .showImg img{
    width: 160px;
    max-height: 300px;
    border-radius: 5px;
    box-shadow: 0 0 10px #cccccc;
  }
</style>
